<template>
  <div class="userAnalysis">
    <!-- 用户活跃 -->
    <el-card shadow="hover" class="userStatisticsBox">
      <div class="searchBox">
        <h3>用户活跃</h3>
      </div>
      <div class="userStatisticsItem">
        <el-card class="one">
          <h4>日活跃用户数</h4>
          <div class="card_item">
            <span class="numSpan">{{ ailyLifeUsers }}</span>
            <!-- <span>
              <span v-if="ailyLifeUsersProportion < '0'">
                <i class="el-icon-caret-bottom">{{
                  ailyLifeUsersProportion
                }}</i>
              </span>
              <span v-if="ailyLifeUsersProportion >= '0'">
                <i class="el-icon-caret-top">{{ ailyLifeUsersProportion }}</i>
              </span>
            </span> -->
          </div>
        </el-card>
        <el-card class="one">
          <h4>日活跃时长</h4>
          <div class="card_item">
            <span class="numSpan">{{ todayOnlineTime }}</span>
            <!-- <span>
              <span v-if="onlineTimeProportion < '0'">
                <i class="el-icon-caret-bottom">{{ onlineTimeProportion }}</i>
              </span>
              <span v-if="onlineTimeProportion >= '0'">
                <i class="el-icon-caret-top">{{ onlineTimeProportion }}</i>
              </span>
            </span> -->
          </div>
        </el-card>
      </div>
      <div class="searchBox">
        <h3 class="p">用户小时活跃人数表</h3>
        <div>
          <!-- <el-select v-model="sexVal" placeholder="请选择性别">
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
          <span style="color: #9d9fa8; margin-right: 10px">性别</span>
          <el-select
            v-model="xingbie"
            style="width: 100px; margin-right: 10px"
            placeholder="请选择性别"
          >
            <el-option label="不限" value=""> </el-option>
            <el-option label="男" value="1"> </el-option>
            <el-option label="女" value="2"> </el-option>
          </el-select>
          <span style="color: #9d9fa8; margin-right: 10px">请选择渠道</span>
          <el-select v-model="userChannelVal" placeholder="请选择用户活跃渠道">
            <el-option
              v-for="item in userChannelOptions"
              :key="item.en_name"
              :label="item.cn_name"
              :value="item.en_name"
            >
            </el-option>
          </el-select>
          <!-- <el-date-picker
            v-model="activeUsersVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="activeUsersPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focusB"
          >
          </el-date-picker> -->
          <el-date-picker
            style="margin-left: 10px"
            v-model="activeUsersValStartDate"
            type="date"
            @change="focusB"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
          <el-button
            class="btn"
            icon="el-icon-search"
            @click="chartActiveUserOrDurationBtn(1)"
            >查询搜索</el-button
          >
          <el-button
            class="btn"
            icon="el-icon-download"
            @click="exportExcelB(1)"
            >导出Excel</el-button
          >
        </div>
      </div>
      <div id="myChartC" :style="{ width: '100%', height: '500px' }"></div>

      <div class="searchBox">
        <h3 class="p">用户日活跃时长表</h3>
        <div>
          <!-- <el-select v-model="sexVal" placeholder="请选择性别">
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
          <span style="color: #9d9fa8; margin-right: 10px">性别</span>
          <el-select
            v-model="xingbie1"
            style="width: 100px; margin-right: 10px"
            placeholder="请选择性别"
          >
            <el-option label="不限" value=""> </el-option>
            <el-option label="男" value="1"> </el-option>
            <el-option label="女" value="2"> </el-option>
          </el-select>
          <span style="color: #9d9fa8; margin-right: 10px">请选择渠道</span>
          <el-select
            v-model="dayUserChannelVal"
            placeholder="请选择用户活跃渠道"
          >
            <el-option
              v-for="item in userChannelOptions"
              :key="item.en_name"
              :label="item.cn_name"
              :value="item.en_name"
            >
            </el-option>
          </el-select>
          <el-date-picker
            v-model="dayUsersVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="dayUsersPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focusA"
          >
          </el-date-picker>
          <el-button
            class="btn"
            icon="el-icon-search"
            @click="chartActiveUserOrDurationBtn(2)"
            >查询搜索</el-button
          >
          <el-button
            class="btn"
            icon="el-icon-download"
            @click="exportExcelB(2)"
            >导出Excel</el-button
          >
        </div>
      </div>
      <div id="myChartD" :style="{ width: '100%', height: '500px' }"></div>
    </el-card>
    <!-- 用户留存 -->
    <el-card shadow="hover" class="userStatisticsBox">
      <div class="searchBox">
        <h3>用户留存</h3>
        <div>
          <span style="color: #9d9fa8; margin-right: 10px">请选择渠道</span>
          <el-select v-model="userRetainedVal" placeholder="请选择用户留存渠道">
            <el-option
              v-for="item in userRetainedOptions"
              :key="item.en_name"
              :label="item.cn_name"
              :value="item.en_name"
            >
            </el-option>
          </el-select>
          <el-date-picker
            v-model="userRetainedTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="userRetainedPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focusC"
          >
          </el-date-picker>
          <el-button
            class="btn"
            icon="el-icon-search"
            @click="chartRetainedByUsersBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcelC"
            >导出Excel</el-button
          >
        </div>
      </div>
      <div class="searchBox">
        <div class="p2">
          <p :class="{ activeC: indexC == 4 }" @click="activeStatusD()">
            留存率
          </p>
          <p :class="{ activeC: indexC == 5 }" @click="activeStatusE()">
            留存人数
          </p>
        </div>
      </div>

      <el-table
        :data="userRetainedTableData"
        v-loading="loading"
        border
        style="width: 100%"
        v-if="this.indexC == 4"
        height="700px"
      >
        <el-table-column prop="date" label="时间" width="180">
        </el-table-column>
        <el-table-column prop="insertNum" label="新增" width="180">
        </el-table-column>
        <el-table-column prop="r2" label="次日" width="180"> </el-table-column>
        <el-table-column prop="r3" label="3日" width="180"> </el-table-column>
        <el-table-column prop="r4" label="4日" width="180"> </el-table-column>
        <el-table-column prop="r5" label="5日" width="180"> </el-table-column>
        <el-table-column prop="r6" label="6日" width="180"> </el-table-column>
        <el-table-column prop="r7" label="7日"> </el-table-column>
        <el-table-column prop="r15" label="15日"> </el-table-column>
        <el-table-column prop="r30" label="30日"> </el-table-column>
      </el-table>

      <el-table
        :data="peopleTableData"
        v-loading="peopleLoading"
        border
        style="width: 100%"
        v-if="this.indexC == 5"
        height="700px"
      >
        <el-table-column prop="date" label="时间" width="180">
        </el-table-column>
        <el-table-column prop="insertNum" label="新增" width="180">
        </el-table-column>
        <el-table-column prop="l2" label="次日" width="180"> </el-table-column>

        <el-table-column prop="l3" label="3日" width="180"> </el-table-column>
        <el-table-column prop="l4" label="4日" width="180"> </el-table-column>
        <el-table-column prop="l5" label="5日" width="180"> </el-table-column>
        <el-table-column prop="l6" label="6日" width="180"> </el-table-column>
        <el-table-column prop="l7" label="7日"> </el-table-column>
        <el-table-column prop="l15" label="15日"> </el-table-column>
        <el-table-column prop="l30" label="30日"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  chartActiveUser,
  chartRetainedByUsers,
  channelList,
  chartActiveUserOrDuration,
} from "@/api/DataManagement";

export default {
  components: { Pagination },
  data() {
    return {
      loading: true,
      peopleLoading: true,
      //用户活跃
      ailyLifeUsers: "", //日活跃用户数
      weeklyLiveUsers: "", //周活跃用户数
      monthlyLiveUsers: "", //月活跃用户数
      ailyLifeUsersProportion: "", //日活跃用户数比例
      weeklyLiveUsersProportion: "", //周活跃用户数比例
      monthlyLiveUsersProportion: "", //月活跃用户数比例
      type: "", //类型
      todayOnlineTime: "", //日活跃时长
      onlineTimeProportion: "", //日活跃时长比例
      userChannelOptions: [],
      userChannelVal: "", //用户活跃渠道下拉框
      xingbie: "",
      activeUsersPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      activeUsersValStartDate: "",
      activeUsersValEndDate: "",
      activeUsersVal: "", //用户活跃时间
      xingbie1: "",
      //日活跃
      dayUserChannelOptions: [],
      dayUserChannelVal: "", //用户活跃渠道下拉框
      dayUsersPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dayUsersValStartDate: "",
      dayUsersValEndDate: "",
      dayUsersVal: "", //用户日活跃时间
      //用户留存
      userRetainedOptions: [],
      userRetainedVal: "", //用户留存渠道下拉框
      userRetainedTableData: [],
      peopleTableData: [], //留存人数
      userRetainedPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      userRetainedTimeValStartDate: "",
      userRetainedTimeValEndDate: "",
      userRetainedTimeVal: "", //用户留存时间

      index: 1,
      // indexB: 6,
      indexC: 4,
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数

      // sexOptions: [
      //   {
      //     value: "",
      //     label: "不限性别",
      //   },
      //   {
      //     value: "1",
      //     label: "男",
      //   },
      //   {
      //     value: "2",
      //     label: "女",
      //   },
      // ],
      // sexVal: "",
    };
  },
  methods: {
    // 导出用户活跃
    exportExcelB(i) {
      if (i == 1) {
        chartActiveUserOrDuration({
          startTime: this.activeUsersValStartDate,
          endTime: this.activeUsersValEndDate,
          sex: this.xingbie,
          channel: this.userChannelVal,
          type: 1,
        }).then((res) => {
          if (res.code == 0) {
            require.ensure([], () => {
              var array = [];
              // for (var i = 0; i <= res.data.date.length; i++) {
              //   for (var j = 0; j < res.data.activeUser.length; j++) {
              //     for (var k = 0; k < res.data.duration.length; k++) {
              //       var arr = {};
              //       arr = {
              //         date: res.data.date[i],
              //         activeUser: res.data.activeUser[j],
              //         duration: res.data.duration[k],
              //       };
              //       // console.log("日期"+res.data.date);
              //       // console.log("活跃"+res.data.activeUser);
              //       // console.log("时长"+res.data.duration);
              //     }
              //   }
              //   array.push(arr);
              //   // console.log(array);
              // }
              res.data.date.forEach((item, index) => {
                let arr = {
                  date: item + "时",
                  activeUser: res.data.activeUser[index],
                  duration: res.data.duration[index],
                };
                array.push(arr);
              });
              const { export_json_to_excel } = require("@/excel/Export2Excel");
              const tHeader = ["时间", "活跃人数", "活跃时长"];
              const filterVal = ["date", "activeUser", "duration"];
              const list = array;
              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, "用户小时活跃人数表");
            });
          }
        });
      } else {
        chartActiveUserOrDuration({
          startTime: this.dayUsersValStartDate,
          endTime: this.dayUsersValEndDate,
          sex: this.xingbie1,
          channel: this.dayUserChannelVal,
          type: 2,
        }).then((res) => {
          if (res.code == 0) {
            require.ensure([], () => {
              var array = [];
              // for (var i = 0; i <= res.data.date.length; i++) {
              //   for (var j = 0; j < res.data.activeUser.length; j++) {
              //     for (var k = 0; k < res.data.duration.length; k++) {
              //       var arr = {};
              //       arr = {
              //         date: res.data.date[i],
              //         activeUser: res.data.activeUser[j],
              //         duration: res.data.duration[k],
              //       };
              //     }
              //   }
              //   array.push(arr);
              // }
              res.data.date.forEach((item, index) => {
                let arr = {
                  date: item,
                  activeUser: res.data.activeUser[index],
                  duration: res.data.duration[index],
                };
                array.push(arr);
              });
              const { export_json_to_excel } = require("@/excel/Export2Excel");
              const tHeader = ["日期", "活跃人数", "活跃时长"];
              const filterVal = ["date", "activeUser", "duration"];
              const list = array;
              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, "用户日活跃时长表");
            });
          }
        });
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 导出用户留存
    exportExcelC() {
      if (this.indexC == 4) {
        chartRetainedByUsers({
          retained: this.indexC, //留存率/留存人数
          // time: "", //1.日/2.周/3.月
          channel: this.userRetainedVal,
          endTime: this.userRetainedTimeValEndDate,
          startTime: this.userRetainedTimeValStartDate,
        }).then((res) => {
          if (res.code == 0) {
            if (res.data.list.length) {
              require.ensure([], () => {
                const {
                  export_json_to_excel,
                } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
                const tHeader = [
                  "日期",
                  "新增",
                  "次日",
                  "3日",
                  "4日",
                  "5日",
                  "6日",
                  "7日",
                  "15日",
                  "30日",
                ]; // 上面设置Excel的表格第一行的标题
                const filterVal = [
                  "date",
                  "insertNum",
                  "r2",
                  "r3",
                  "r4",
                  "r5",
                  "r6",
                  "r7",
                  "r15",
                  "r30",
                ]; // 上面的index、nickName、name是tableData里对象的属性key值
                const list = res.data.list; //把要导出的数据tableData存到list
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, "用户留存(留存率)"); //最后一个是表名字
              });
            }
          }
        });
      } else {
        chartRetainedByUsers({
          retained: this.indexC, //留存率/留存人数
          time: "", //1.日/2.周/3.月
          channel: this.userRetainedVal,
          endTime: this.userRetainedTimeValEndDate,
          startTime: this.userRetainedTimeValStartDate,
        }).then((res) => {
          if (res.code == 0) {
            if (res.data.list.length) {
              require.ensure([], () => {
                const {
                  export_json_to_excel,
                } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
                const tHeader = [
                  "日期",
                  "新增",
                  "次日",
                  "3日",
                  "4日",
                  "5日",
                  "6日",
                  "7日",
                  "15日",
                  "30日",
                ]; // 上面设置Excel的表格第一行的标题
                const filterVal = [
                  "date",
                  "insertNum",
                  "l2",
                  "l3",
                  "l4",
                  "l5",
                  "l6",
                  "l7",
                  "l15",
                  "l30",
                ]; // 上面的index、nickName、name是tableData里对象的属性key值
                const list = res.data.list; //把要导出的数据tableData存到list
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, "用户留存(留存人数)"); //最后一个是表名字
              });
            }
          }
        });
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

    //用户活跃
    chartActiveUser() {
      chartActiveUser({
        startTime: "",
        endTime: "",
        type: "", //类型DAU/WAU/MAU
        channel: "",
      }).then((res) => {
        if (res.code == 0) {
          this.ailyLifeUsers = res.data.ailyLifeUsers; //日活跃用户数
          // this.weeklyLiveUsers = res.data.weeklyLiveUsers; //周活跃用户数
          // this.monthlyLiveUsers = res.data.monthlyLiveUsers; //月活跃用户数
          this.ailyLifeUsersProportion = res.data.ailyLifeUsersProportion; //日活跃用户数比例
          // this.weeklyLiveUsersProportion = res.data.weeklyLiveUsersProportion; //周活跃用户数比例
          // this.monthlyLiveUsersProportion = res.data.monthlyLiveUsersProportion; //月活跃用户数比例
          // this.type = res.data.type; //类型
          this.todayOnlineTime = res.data.todayOnlineTime; //日活跃时长
          this.onlineTimeProportion = res.data.onlineTimeProportion; //日活跃时长比例
        }
      });
    },
    //搜索
    chartActiveUserBtn() {
      // chartActiveUser({
      //   startTime: this.activeUsersValStartDate,
      //   endTime: this.activeUsersValEndDate,
      //   type: this.index, //类型DAU/WAU/MAU
      //   channel: this.userChannelVal,
      // }).then((res) => {
      //   if (res.code == 0) {
      //     this.ailyLifeUsers = res.data.ailyLifeUsers; //日活跃用户数
      //     this.weeklyLiveUsers = res.data.weeklyLiveUsers; //周活跃用户数
      //     this.monthlyLiveUsers = res.data.monthlyLiveUsers; //月活跃用户数
      //     this.ailyLifeUsersProportion = res.data.ailyLifeUsersProportion; //日活跃用户数比例
      //     this.weeklyLiveUsersProportion = res.data.weeklyLiveUsersProportion; //周活跃用户数比例
      //     this.monthlyLiveUsersProportion = res.data.monthlyLiveUsersProportion; //月活跃用户数比例
      //     this.type = res.data.type; //类型
      //     this.todayOnlineTime = res.data.todayOnlineTime; //日活跃时长
      //     this.onlineTimeProportion = res.data.onlineTimeProportion; //日活跃时长比例
      //   }
      // });
    },
    //用户留存
    chartRetainedByUsers() {
      this.loading = true;
      chartRetainedByUsers({
        retained: "", //留存率/留存人数
        time: "", //1.日/2.周/3.月
        channel: "",
        endTime: "",
        startTime: "",
      }).then((res) => {
        if (res.code == 0) {
          this.type = res.data.type;
          this.time = res.data.time;
          this.total = res.data.total;
          this.userRetainedTableData = res.data.list;
          this.loading = false;
        }
      });
    },
    //搜索
    chartRetainedByUsersBtn() {
      this.peopleLoading = true;

      chartRetainedByUsers({
        retained: this.indexC, //留存率/留存人数
        time: this.indexB, //1.日/2.周/3.月
        channel: this.userRetainedVal,
        endTime: this.userRetainedTimeValEndDate,
        startTime: this.userRetainedTimeValStartDate,
      }).then((res) => {
        if (res.code == 0) {
          this.type = res.data.type;
          this.time = res.data.time;
          this.total = res.data.total;
          this.userRetainedTableData = res.data.list;
          this.peopleTableData = res.data.list;
          this.peopleLoading = false;
        }
      });
    },

    activeStatusA() {
      this.index = 1;
      chartActiveUser({
        startTime: this.activeUsersValStartDate,
        endTime: this.activeUsersValEndDate,
        type: this.index, //类型DAU/WAU/MAU
        channel: this.userChannelVal,
      }).then((res) => {
        if (res.code == 0) {
          this.ailyLifeUsers = res.data.ailyLifeUsers; //日活跃用户数
          this.weeklyLiveUsers = res.data.weeklyLiveUsers; //周活跃用户数
          this.monthlyLiveUsers = res.data.monthlyLiveUsers; //月活跃用户数
          this.ailyLifeUsersProportion = res.data.ailyLifeUsersProportion; //日活跃用户数比例
          this.weeklyLiveUsersProportion = res.data.weeklyLiveUsersProportion; //周活跃用户数比例
          this.monthlyLiveUsersProportion = res.data.monthlyLiveUsersProportion; //月活跃用户数比例
          this.type = res.data.type; //类型
        }
      });
    },
    activeStatusB() {
      this.index = 2;
      chartActiveUser({
        startTime: this.activeUsersValStartDate,
        endTime: this.activeUsersValEndDate,
        type: this.index, //类型DAU/WAU/MAU
        channel: this.userChannelVal,
      }).then((res) => {
        if (res.code == 0) {
          this.ailyLifeUsers = res.data.ailyLifeUsers; //日活跃用户数
          this.weeklyLiveUsers = res.data.weeklyLiveUsers; //周活跃用户数
          this.monthlyLiveUsers = res.data.monthlyLiveUsers; //月活跃用户数
          this.ailyLifeUsersProportion = res.data.ailyLifeUsersProportion; //日活跃用户数比例
          this.weeklyLiveUsersProportion = res.data.weeklyLiveUsersProportion; //周活跃用户数比例
          this.monthlyLiveUsersProportion = res.data.monthlyLiveUsersProportion; //月活跃用户数比例
          this.type = res.data.type; //类型
        }
      });
    },
    activeStatusC() {
      this.index = 3;
      chartActiveUser({
        startTime: this.activeUsersValStartDate,
        endTime: this.activeUsersValEndDate,
        type: this.index, //类型DAU/WAU/MAU
        channel: this.userChannelVal,
      }).then((res) => {
        if (res.code == 0) {
          this.ailyLifeUsers = res.data.ailyLifeUsers; //日活跃用户数
          this.weeklyLiveUsers = res.data.weeklyLiveUsers; //周活跃用户数
          this.monthlyLiveUsers = res.data.monthlyLiveUsers; //月活跃用户数
          this.ailyLifeUsersProportion = res.data.ailyLifeUsersProportion; //日活跃用户数比例
          this.weeklyLiveUsersProportion = res.data.weeklyLiveUsersProportion; //周活跃用户数比例
          this.monthlyLiveUsersProportion = res.data.monthlyLiveUsersProportion; //月活跃用户数比例
          this.type = res.data.type; //类型
        }
      });
    },
    //留存率
    activeStatusD() {
      this.indexC = 4;
      this.loading = true;

      chartRetainedByUsers({
        retained: this.indexC, //留存率/留存人数
        time: this.indexC, //1.日/2.周/3.月
        channel: this.userRetainedVal,
        endTime: this.userRetainedTimeValEndDate,
        startTime: this.userRetainedTimeValStartDate,
      }).then((res) => {
        if (res.code == 0) {
          this.type = res.data.type;
          this.time = res.data.time;
          // this.total = res.data.total;
          this.userRetainedTableData = res.data.list;
          this.loading = false;
        }
      });
    },
    //留存人数
    activeStatusE() {
      this.indexC = 5;
      this.peopleLoading = true;

      chartRetainedByUsers({
        retained: this.indexC, //留存率/留存人数
        time: this.indexC, //1.日/2.周/3.月
        channel: this.userRetainedVal,
        endTime: this.userRetainedTimeValEndDate,
        startTime: this.userRetainedTimeValStartDate,
      }).then((res) => {
        if (res.code == 0) {
          this.type = res.data.type;
          this.time = res.data.time;
          // this.totalA = res.data.total;
          this.peopleTableData = res.data.list;
          this.peopleLoading = false;
        }
      });
    },

    //渠道列表
    channelList() {
      channelList({}).then((res) => {
        if (res.code == 0) {
          this.userStatisticsOptions = res.data;
          this.userChannelOptions = res.data;
          this.userRetainedOptions = res.data;
          this.dayUserChannelOptions = res.data;
        }
      });
    },
    focusA(time) {
      if (!this.dayUsersVal) {
        this.dayUsersVal = [];
      }
      this.dayUsersValStartDate = this.dayUsersVal[0];
      this.dayUsersValEndDate = this.dayUsersVal[1];
    },
    focusB(time) {
      this.activeUsersValEndDate = this.activeUsersValStartDate;
      console.log(
        this.activeUsersValEndDate + "jies" + this.activeUsersValStartDate
      );
    },
    focusC(time) {
      if (!this.userRetainedTimeVal) {
        this.userRetainedTimeVal = [];
      }
      this.userRetainedTimeValStartDate = this.userRetainedTimeVal[0];
      this.userRetainedTimeValEndDate = this.userRetainedTimeVal[1];
    },

    chartActiveUserOrDuration() {
      chartActiveUserOrDuration({
        startTime: this.activeUsersValStartDate,
        endTime: this.activeUsersValEndDate,
        sex: this.xingbie,
        channel: this.userChannelVal,
        type: 1,
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChartC = this.$echarts.init(
            document.getElementById("myChartC")
          );
          // 绘制图表
          myChartC.setOption({
            color: ["#5470C6", "#91CC75", "#EE6666"],
            tooltip: {
              trigger: "axis",
              formatter: function (params) {
                let firstParams = params[0]; //活跃人数
                let sndParams = params[1];
                return (
                  firstParams.name +
                  "时" +
                  "<br />" +
                  "活跃人数:" +
                  firstParams.data +
                  "人" +
                  "<br />" +
                  "活跃时长:" +
                  sndParams.data +
                  "小时"
                );
              },
            },
            legend: {
              data: ["活跃人数", "活跃时长"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            // yAxis: [
            //   {
            //     type: "value",
            //     name: "活跃人数",
            //     min: 0,
            //     position: "right",
            //     axisLine: {
            //       show: true,
            //       lineStyle: {
            //         color: colors[0],
            //       },
            //     },
            //     axisLabel: {
            //       formatter: "{value} ",
            //     },
            //   },
            //   {
            //     type: "value",
            //     name: "活跃时长",
            //     min: 0,
            //     position: "right",
            //     offset: 80,
            //     axisLine: {
            //       show: true,
            //       lineStyle: {
            //         color: colors[1],
            //       },
            //     },
            //     axisLabel: {
            //       formatter: "{value} ",
            //     },
            //   },
            // ],
            // yAxis: [
            //   {
            //     type: "value",
            //     name: "活跃人数",
            //     position: "left",
            //     nameGap: 35,
            //     nameRotate: 0,
            //     nameTextStyle: {
            //       fontSize: 16,
            //     },
            //     //默认以千分位显示，不想用的可以在这加一段
            //     axisLabel: {
            //       //调整左侧Y轴刻度， 直接按对应数据显示
            //       show: true,
            //       // showMinLabel: true,
            //       // showMaxLabel: true,
            //       // formatter: function (value) {
            //       //   return value;
            //       // },
            //     },
            //   },
            //   {
            //     type: "value",
            //     name: "活跃时长",
            //     position: "right",
            //     offset: 80,
            //     nameGap: 35,
            //     nameRotate: 0,
            //     nameTextStyle: {
            //       fontSize: 16,
            //     },
            //     //默认以千分位显示，不想用的可以在这加一段
            //     axisLabel: {
            //       //调整左侧Y轴刻度， 直接按对应数据显示
            //       show: true,
            //       // showMinLabel: true,
            //       // showMaxLabel: true,
            //       // formatter: function (value) {
            //       //   return value;
            //       // },
            //     },
            //   },
            // ],
            series: [
              {
                name: "活跃人数",
                type: "line",
                stack: "总量",
                data: res.data.activeUser,
              },
              {
                name: "活跃时长",
                type: "line",
                stack: "总量1",
                data: res.data.duration,
              },
            ],
          });
        }
      });

      chartActiveUserOrDuration({
        startTime: this.dayUsersValStartDate,
        endTime: this.dayUsersValEndDate,
        sex: this.xingbie1,
        channel: this.dayUserChannelVal,
        type: 2,
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChartD = this.$echarts.init(
            document.getElementById("myChartD")
          );
          // 绘制图表
          myChartD.setOption({
            color: ["#5470C6", "#91CC75", "#EE6666"],
            tooltip: {
              trigger: "axis",
              formatter: function (params) {
                let firstParams = params[0]; //活跃人数
                let sndParams = params[1];
                return (
                  "活跃人数:" +
                  firstParams.data +
                  "人" +
                  "<br />" +
                  "活跃时长:" +
                  sndParams.data +
                  "小时"
                );
              },
            },
            legend: {
              data: ["活跃人数", "活跃时长"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },

            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "活跃人数",
                type: "line",
                stack: "总量",
                data: res.data.activeUser,
              },
              {
                name: "活跃时长",
                type: "line",
                stack: "总量1",
                data: res.data.duration,
              },
            ],
          });
        }
      });
    },
    //搜索
    chartActiveUserOrDurationBtn(i) {
      if (i == 1) {
        chartActiveUserOrDuration({
          startTime: this.activeUsersValStartDate,
          endTime: this.activeUsersValEndDate,
          sex: this.xingbie,
          channel: this.userChannelVal,
          type: 1,
        }).then((res) => {
          if (res.code == 0) {
            // 基于准备好的dom，初始化echarts实例
            let myChartC = this.$echarts.init(
              document.getElementById("myChartC")
            );
            // 绘制图表
            myChartC.setOption({
              color: ["#5470C6", "#91CC75", "#EE6666"],
              tooltip: {
                trigger: "axis",
                formatter: function (params) {
                  let firstParams = params[0]; //活跃人数
                  let sndParams = params[1];
                  return (
                    firstParams.name +
                    "时" +
                    "<br />" +
                    "活跃人数:" +
                    firstParams.data +
                    "人" +
                    "<br />" +
                    "活跃时长:" +
                    sndParams.data +
                    "小时"
                  );
                },
              },
              legend: {
                data: ["活跃人数", "活跃时长"],
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: res.data.date,
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  name: "活跃人数",
                  type: "line",
                  stack: "总量",
                  data: res.data.activeUser,
                },
                {
                  name: "活跃时长",
                  type: "line",
                  stack: "总量1",
                  data: res.data.duration,
                },
              ],
            });
          }
        });
      } else {
        chartActiveUserOrDuration({
          startTime: this.dayUsersValStartDate,
          endTime: this.dayUsersValEndDate,
          sex: this.xingbie1,
          channel: this.dayUserChannelVal,
          type: 2,
        }).then((res) => {
          if (res.code == 0) {
            // 基于准备好的dom，初始化echarts实例
            let myChartD = this.$echarts.init(
              document.getElementById("myChartD")
            );
            // 绘制图表
            myChartD.setOption({
              color: ["#5470C6", "#91CC75", "#EE6666"],
              tooltip: {
                trigger: "axis",
                formatter: function (params) {
                  let firstParams = params[0]; //活跃人数
                  let sndParams = params[1];
                  return (
                    "活跃人数:" +
                    firstParams.data +
                    "人" +
                    "<br />" +
                    "活跃时长:" +
                    sndParams.data +
                    "小时"
                  );
                },
              },
              legend: {
                data: ["活跃人数", "活跃时长"],
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
              },

              xAxis: {
                type: "category",
                boundaryGap: false,
                data: res.data.date,
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  name: "活跃人数",
                  type: "line",
                  stack: "总量",
                  data: res.data.activeUser,
                },
                {
                  name: "活跃时长",
                  type: "line",
                  stack: "总量1",
                  data: res.data.duration,
                },
              ],
            });
          }
        });
      }
    },
  },
  created() {
    this.chartActiveUser();
    this.chartRetainedByUsers();
    this.channelList(); //渠道
    this.chartActiveUserOrDuration();
  },
};
</script>

<style lang="less" scoped>
.userAnalysis {
  margin: 30px;
  height: 100%;

  .userStatisticsBox {
    margin-bottom: 30px;
    .userStatisticsHead {
      display: flex;
      justify-content: space-between;
      .p {
        display: flex;
        p {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
        .activeD {
          background-color: #0079fe;
          color: #fff;
          border-radius: 10px;
        }
      }
    }
    h3 {
      font-size: 30px;
      margin: 0px;
    }
    .todaySpan {
      margin-top: 20px;
      display: inline-block;
    }
    .userStatisticsItem {
      margin-top: 20px;
      display: flex;
      margin-bottom: 40px;
      .one {
        width: 300px;
        height: 110px;
        margin-right: 20px;
        h4 {
          margin: 0px;
          font-size: 26px;
          margin-bottom: 10px;
        }
        .numSpan {
          font-size: 28px;
        }
      }
    }
    .searchBox {
      display: flex;
      justify-content: space-between;
      margin: 60px 0px;
      .el-input__inner,
      .el-range-editor.el-input__inner,
      .el-date-editor .el-range-input {
        margin-left: 10px;
      }
      .p2 {
        display: flex;
        p {
          width: 70px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
      .p {
        display: flex;
        p {
          width: 60px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
      .active {
        background-color: #0079fe;
        color: #fff;
        border-radius: 10px;
      }
      .activeC {
        background-color: #0079fe;
        color: #fff;
        border-radius: 10px;
      }
      .el-button {
        margin-left: 20px;
      }
      .el-select {
        margin-left: 10px;
      }
    }
    .onlineSearchBox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .el-input__inner,
      .el-range-editor.el-input__inner,
      .el-date-editor .el-range-input {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .onlineCard {
      display: flex;
      justify-content: space-between;
      margin: 40px 0px;
      .box {
        width: 300px;
        height: 150px;
      }
    }
  }
  .card_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>